// var dynamicTabData = [
//     {
//         JS_URL: "/report/page/demo/dynamicTab/jbxxForm.js",//封装组件的Js文件
//         COM_NAME: "jbxxForm",//导入的组件名
//         TITLE: "基本信息",//选项卡的名字
//         REF: "jbxx",//ref不设置时候，读取COM_NAME作为REF，组件的ref，并不是组件内部的ref
//         COM_PARAMS: "",//{//要传进组件的props里面的值，组件内部用config接收
//         FUNCTION_NAME: "component-mounted"
//     },
//     {
//         JS_URL: "/report/page/demo/dynamicTab/qqzbGrid.js",
//         COM_NAME: "qqzbGrid",
//         TITLE: "前期准备",
//         REF: "qqzb",
//         COM_PARAMS: "",
//         FUNCTION_NAME: "test02-component-mounted"
//     },
//     {
//         JS_URL: "/report/page/demo/dynamicTab/hbfxCom.js",
//         COM_NAME: "zqhb",
//         TITLE: "到期债务(还本)",
//         REF: "zqhb",
//         COM_PARAMS:"" ,
//         FUNCTION_NAME: ""
//     }
// ]
var dynamicTabData = []
const eventBus = new Vue()
function creatItabsWindow(config, e) {
    getTabsData(config, e, true)
}
function creatCustomItabs(config, e) {
    getTabsData(config, e, false)
}
function getTabsData(config, e, isWindow) {
    if (config.t_id) {
        $.ajax({
            url: "/report/third-api/tab/getTabConfigInfo",
            dataType: "text",
            async: false,
            type: "GET",
            data: {
                t_id: config.t_id
            },
            success: function (response) {
                response = JSON.parse(response)
                if (response.code == 20000) {
                    dynamicTabData = response.data
                    if (isWindow) {
                        initMsgBox(config, e)
                    } else {
                        initDynamitTab(config, e)
                    }
                } else {
                    e.$iMessage("请求数据失败，请重新尝试！")
                }
            },
            error: function (error) {
                console.log(error);
            }
        });
    } else {
        e.$iMessage("请配置正确的T_ID！");
        return
    }

}
function initMsgBox(config, e) {
    const self = e;
    self.$msgbox({
        title: config.title,
        customClass: 'dialog-custom-class',
        showCancelButton: true,
        showConfirmButton: true,
        cancelButtonText: '取消',
        confirmButtonText: "保存",
        closeOnClickModal: false,
        customClass: config.customClass,
        message: `<div class="tab-container" id="tab-container"></div>`,
        dangerouslyUseHTMLString: true,
        parent: "#app",
        beforeClose: (action, instance, done) => {
            self.dialog = instance;
            if (action === 'confirm') {
                if (!!config.submitFn) {
                    config.submitFn();
                }
            } else {
                done();
            }
        }
    }).catch(function (error) {
    });
    self.$nextTick(function () {
        config.ele = "tab-container"
        initDynamitTab(config, e)
    });
}
function initDynamitTab(config, e) {
    const self = e;
    self.$nextTick(() => {
        var tabContainer = document.querySelector("#" + config.ele);
        if (tabContainer) {
            var existingTabsComponent = tabContainer.children;
            if (existingTabsComponent && existingTabsComponent.length > 0) {
                // 如果已经存在，则直接添加到页面中
                tabContainer.appendChild(existingTabsComponent[0].__vue__.$el);
            } else {
                // 创建选项卡组件的 VNode 数组
                // var tabsVnodes = dynamicTabData.map(function (tabData, index) {
                //     var jsUrl = tabData.JS_URL;
                //     var comName = tabData.COM_NAME;
                //     var title = tabData.TITLE;
                //     var comParams = tabData.COM_PARAMS ? JSON.parse(tabData.COM_PARAMS) : {};
                //     var refValue = tabData.REF || tabData.COM_NAME; // 如果 ref 为空，则使用默认值
                //     var comProps = {
                //         props: { config: comParams },
                //         ref: refValue,
                //         created() {
                //             this.$refs[refValue] = this;
                //         }
                //     }
                //     if (tabData.FUNCTION_NAME) {
                //         var eventName = toCamelCase(tabData.FUNCTION_NAME)
                //         comProps.on = {
                //             [tabData.FUNCTION_NAME]: function ($event) {
                //                 self.onComponentMounted(eventName, $event)
                //             }
                //         }
                //     }
                //     // 从服务器获取 JavaScript 文件并注册组件
                //     return fetch(jsUrl).then(function (response) {
                //         return response.text();
                //     }).then(function (jsCode) {
                //         eval(jsCode)
                //         return self.$createElement("el-tab-pane", {
                //             props: { label: title },
                //         }, [self.$createElement(comName, comProps)]);
                //     });
                // });
                // // 渲染选项卡组件
                // Promise.all(tabsVnodes)
                //     .then(function (vnodes) {
                //         var tabsComponent = new Vue({
                //             render: function (h) {
                //                 return h("el-tabs", {
                //                     class: "iv-dynamin-tab"
                //                 }, vnodes);
                //             },
                //         }).$mount();
                //         tabContainer.appendChild(tabsComponent.$el);
                //     }).finally(function () {
                //     });
                var vnodes = [];
                for (var i = 0; i < dynamicTabData.length; i++) {
                    var tabData = dynamicTabData[i];
                    var jsUrl = tabData.JS_URL;
                    var comName = tabData.COM_NAME;
                    var title = tabData.TITLE;
                    var comParams = tabData.COM_PARAMS ? JSON.parse(tabData.COM_PARAMS) : {};
                    var refValue = tabData.REF || tabData.COM_NAME;
                    var comProps = {
                        props: { config: comParams },
                        ref: refValue,
                        created() {
                            this.$refs[refValue] = this;
                        }
                    }

                    if (tabData.FUNCTION_NAME) {
                        var eventName = toCamelCase(tabData.FUNCTION_NAME);
                        comProps.on = {
                            [tabData.FUNCTION_NAME]: function ($event) {
                                self.onComponentMounted(eventName, $event)
                            }
                        };
                    }

                    var xhr = new XMLHttpRequest();
                    xhr.open('GET', jsUrl, false); // 将async标志设置为false
                    xhr.send(null);

                    if (xhr.status === 200) {
                        var jsCode = xhr.responseText;
                        eval(jsCode);
                        var vnode = self.$createElement("el-tab-pane", {
                            props: { label: title },
                        }, [self.$createElement(comName, comProps)]);
                        vnodes.push(vnode);
                    }
                }

                var tabsComponent = new Vue({
                    render: function (h) {
                        return h("el-tabs", {
                            class: "iv-dynamin-tab"
                        }, vnodes);
                    },
                }).$mount();
                tabContainer.appendChild(tabsComponent.$el);
            }
        } else {
            console.log("tabContainer is null");
        }
    })

}
function toCamelCase(str) {
    return str.replace(/[-_](\w)/g, function (match, p1) {
        return p1.toUpperCase();
    });
}
